<template>
  <div class="block ">
    <div class="flex block-info" :class="className">
      <div  v-if="title" class="title-block">{{title}}</div>
      <div v-else> <slot name="title" ></slot></div>
      <div class="extra" @click="close(title)">	&times;</div>
    </div>
    <div class="block-con-info">
      <slot ></slot>
    </div>
  </div>
</template>

<script>
export default {
  name: "block",
  props:{
    className:{
      type:String,
      default:'',
    },
    title:{
      type: String,
      default:''
    },
    extra:{
      type:String,
      default:''
    }
  },
  methods: {
    close(data){
      this.$emit('close',data);
    }
  }
}
</script>

<style scoped lang="less">
.anticon {
  margin-right: 6px;
  font-size: 24px;
}
@import '../../setting.less';
.title-block{
  font-size:16px;
  padding-left:15px;
}
.flex{
  display: flex;
}
.extra{
  font-size:24px;
  cursor: pointer;
  color:#fff;
  &:hover{
    opacity:1;
    color: red;
  }
}
.block{
  .block-info{
    &.alarm_status{
      border-color:red;
      background-image: linear-gradient(rgba(255, 0, 0, 0.18),rgba(255, 0, 0, 0.25),rgba(255, 0, 0, 0.18));
      &::before,&::after{
        background:red;
      }
      .extra{
        color: red;
      }
    }
    &.abnormal_status{
      border-color: @S03_002;
      background-image: linear-gradient(rgba(250, 230, 0, 0.18),rgba(250, 230, 0, 0.25),rgba(250, 230, 0, 0.18));
      &::before,&::after{
        background:@S03_002;
      }
      .extra{
        color: @S03_002;
      }
    }
    &.offline_status{
      border-color: @S03_001;
      background-image: linear-gradient(rgba(240, 150, 20, 0.18),rgba(240, 150, 20, 0.25),rgba(240, 150, 20, 0.18));
      &::before,&::after{
        background:@S03_001;
      }
      .extra{
        color: @S03_001;
      }
    }
    border: 1px solid #eee;
    position:relative;
    background: #008aff;
    color: #fff;
    //background-image: linear-gradient(rgba(3, 172, 255, 0.18),rgba(0, 172, 255, 0.25),rgba(3, 172, 255, 0.18));
    justify-content: space-between;
    padding: 10px;
    margin-top: 0px;
    overflow: hidden;
    align-items:center;
    &::before,&::after{
      display:block;
      content: '';
      height:12px;
      width:2px;
      background:#008aff;
      position:absolute;
      transform: translateY(-50%);
      top: 50%;
    }
    &::before{
      left: 0;
    }
    &::after{
      right:0;
    }
  }
}
</style>
